<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<!-- 浮动属性  floot:left,right,none -->
		<!-- 清除浮动  clear:Left,right,both  -->
		<style>
			div{
				width: 300px;
				height: 300px;
				border-radius: 50%;
				/* 浮动 */
				float: right;
				font-size: 10em;
				text-align: center;
				line-height: 300px;
			}
			#d1{
				background-color: #ee1e83;
			}
			#d2{
				background-color: #ffff00;
			}
			#d3{
				background-color: #55ff00;
				clear:both;
			}
			#d4{
				background-color: #55ffff;
				clear: right;
			}
		</style>
	</head>
	<body>
		<!-- 页面排版:左右形式---浮动,元素变成块,飘起来,父级左右点 -->
	<div id="d1">1</div>
	<div id="d2">2</div>
	<div id="d3">3</div>
	<div id="d4">4</div>
	</div>
	</body>
</html>